<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null,
      ws: null
    };
  },
  mounted() {
    this.connect();
  },
  methods: {
    connect() {
      this.ws = new WebSocket('ws://localhost:8080/websocket/data');
      this.ws.onmessage = (event) => {
        this.showMessage(event.data);
      };
      this.ws.onopen = () => {
        window.alert('WebSocket connection opened!')
      };
      this.ws.onclose = () => {
        window.alert('WebSocket connection closed!')
      };
    },
    showMessage(message) {
      this.messages = message;
    }
  }
};
</script>
